<template>
  <div id="app" class="new">
    <!-- <div class="top-img">
      <van-image width="300"  height="30" :src="info.topimg" />
    </div>
    <van-search @click="$router.push('/keyword')"  shape="round"  background="#ffb1b1" placeholder="请填写您的搜索信息"  /> -->
    <!-- <div class="banners" style="position: relative;">

      <van-swipe :autoplay="3000" indicator-color="#e4bd83" indicator-Colors="#ffffff">
        <van-swipe-item v-for="(image, index) in images" :key="index" @click="urllinks(image.link)">
          <img v-lazy="image.picurl" />

        </van-swipe-item>
      </van-swipe>
      <div v-if="info.islogo==1" class="heads clearfix" style="position: absolute;top:30px ;z-index: 100;left: 30px;">
        <div class="fl">

          <img :src="info.logo" alt="" style="height: 30px;width: 30px;">
        </div>
        <div class="fl" style="margin-top:3px ;margin-left:10px ;">
          <img :src="info.topimg" alt="" style="height: 24px;">

        </div>
      </div>
    </div> -->
    <!-- <img class="banner" src="/static/img/banner.png" alt=""> -->
    <div class="banner"></div>
    <div class="seach">
      <van-search v-model="message" show-action placeholder="请输入姓名或者编号" @input="onSearch" @clear="onclear" left-icon=''>
        <template #action>
          <!-- <div class="wx" @click="onSearch">搜索</div> -->
          <img class="icon" @click="onSearch" src="../../static/img/search.png" alt="">
        </template>
      </van-search>
    </div>
    <div class="shuju">

      <div class="shujus">
        <div class="a1">
          <div class="b1">
            {{info.nums}}
          </div>
          <div class="b2">
            已报名
          </div>
        </div>
        <div class="a1">
          <div class="b1">
            {{info.huolizhi}}
          </div>
          <div class="b2">
            已投火力值
          </div>
        </div>
        <div class="a1">
          <div class="b1" v-if="info.huodong">
            {{info.huodong.reading}}
          </div>
          <div class="b2">
            浏览量
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 3% 5%;">
      <div class="timeNote">
        <div class="txt">活动时间</div>
        <van-notice-bar scrollable left-icon="volume-o" background="#fff0d9" :text="gonggao" />
      </div>

    </div>
    <div class="showtime" v-if="info.tpzt==2">
      <div class="item">
        <div class="left">
          <div>报 名</div>
          <div>时 间</div>
        </div>
        <div class="right">
          <div>{{info.huodong.bmtime.slice(0,19)}} </div>
          <div>{{info.huodong.bmtime.slice(22,41)}}</div>
        </div>
      </div>
      <div class="block"></div>
      <div class="item">
        <div class="left">
          <div>投 票</div>
          <div>时 间</div>
        </div>
        <div class="right">
          <div>{{info.huodong.tptime.slice(0,20)}} </div>
          <div>{{info.huodong.tptime.slice(22,41)}}</div>
        </div>
      </div>
    </div>
    <div class="huodong" v-if="info.tpzt==1">
      <div class="a1" style="text-align: center;padding-top: 1px;position: relative;padding-bottom: 3%;">
        <img src="/static/image/a2.png" alt="" style="width: 50%;margin: -3px auto 0;">
        <div style="position: absolute;top: 0;width: 100%;text-align: center;color: #ffffff;">{{info.tpzt==2?'活动时间':'活动倒计时'}}</div>
      </div>
      <div class="a2" v-if="info.tpzt==2">
        <div class="b1">
          <img src="/static/image/a3.png" alt="">
          <p>报名:{{info.huodong.bmtime}}</p>
        </div>
        <div class="b1">
          <img src="/static/image/a3.png" alt="">
          <p>投票:{{info.huodong.tptime}}</p>
        </div>
      </div>

      <div class="a3" v-if="info.tpzt==2">

        <!-- <div class="b1 b2"><van-count-down :time="time" format="HH" /></div>
				<div class="b1 b4">:</div>
				<div class="b1 b2"><van-count-down :time="time" format="HH" /></div>
				<div class="b1 b4">:</div>
				<div class="b1 b2"><van-count-down :time="time" format="HH" /></div>
				 -->
        <!-- 			 <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /> -->
        <van-count-down :time="time" @change="change">
          <template #default="timeData">
            <div class="blocks">
              <span class="block">{{ timeData.hours1 }}</span>
              <span class="block">{{ timeData.hours2 }}</span>
            </div>

            <span class="colon">:</span>
            <div class="blocks">
              <span class="block">{{ timeData.minutes1 }}</span>
              <span class="block">{{ timeData.minutes2 }}</span>
            </div>
            <span class="colon">:</span>
            <div class="blocks">
              <span class="block">{{ timeData.seconds1 }}</span>
              <span class="block">{{ timeData.seconds2 }}</span>
            </div>
          </template>
        </van-count-down>
      </div>

    </div>
    <div></div>
    <div id="pad-w">
      <van-row type="flex" gutter="8" justify="space-between">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getmorelist" :immediate-check="false">
          <div style="display: flex;flex-wrap: wrap;">
            <van-col span="12" v-for="(list, index) in list" :key="index" class="span12" @click="tiao(list.id)">
              <div class="imgss">

                <img v-lazy="list.photo" @click="tiao(list.id)" />
                <!-- <span class="hao">{{list.id}}号</span> -->
                <div class="mask" v-if="list.photo">
                  <div class="name">{{list.name}}</div>
                  <div class="detail">
                    <div class="number">{{list.id}}号</div>
                    <div class="hot">{{list.huolizhi}}<img src="../../static/img/hot.png" alt=""> </div>
                  </div>
                </div>
              </div>
              <!-- <div class="hntj-botm-s" @click="tiao(list.id)">

                <div class="a11">{{list.name}}</div>
                <div class="a12">
                  <span>{{list.huolizhi}}</span>
                  <img src="/static/image/a4.png" alt="">
                </div>
              </div> -->
            </van-col>
          </div>
        </van-list>
      </van-row>
    </div>
    <a href="https://beian.miit.gov.cn/" target="_blank">
      <div  class="beian">备案号：津ICP备2022006819号 </div>
    </a>
    <div class="gerenfx" @click="tiaos()">
      <img src="/static/image/share.png" alt="">
    </div>
    <div class="h-50"></div>
  </div>
</template>
import 'vant/lib/index.less';
<style>
.beian {
  padding: 0 3% 18px;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
}
.beian a {
  text-decoration: none !important;
}
.beian a span {
  color: #008cff;
}
@notice-bar-text-color: #000000;
#pad-w .van-list {
}
.gerenfx {
  position: fixed;
  bottom: 120px;
  right: 20px;
}

.gerenfx img {
  width: 40px;
  height: 40px;
}
</style>
<style scoped>
#app {
  background-color: #262426;
}
.banner {
  width: 100vw;
  height: 22vh;
  background-image: url("/static/img/banner2.png");
  background-size: 100%;
}
.new .shuju {
  background: none;
  border-radius: 15px;
  background-color: #262426;
}
.new .shuju .b1 {
  font-size: 18px;
  color: #fc6e20;
}
.new .shuju .b2 {
  font-size: 12px;
  color: #ffffff;
}
.shujus .a1:nth-child(2) {
  border-left: 1px #999 dashed;
  border-right: 1px #999 dashed;
}
.new .timeNote {
  display: flex;
  align-items: center;
}
.timeNote .txt {
  font-size: 14px;
  color: #fff;
}
/deep/.timeNote .van-notice-bar {
  background-color: transparent !important;
  flex: 1;
}
.new .seach {
  border-radius: 50px;
  /* border:1px red solid ; */
  margin: 0;
  margin-top: -22px;
  background-color: #fff;
  overflow: hidden;
}
.new .seach .van-search {
  background-color: #262426;
}
.new .seach .van-search .van-search__content {
  background: transparent;
}
.new .seach .van-search__action {
  background: transparent !important;
  border: 1px #fff solid;
  border-left: none;
}
.new .seach .van-search__content {
  border: 1px #fff solid;
  border-right: none;
}
.new .seach .icon {
  display: block;
  width: 21px;
  height: 20px;
  padding: 7px 0;
  padding-right: 8px;
}
.new .van-search--show-action {
  padding-right: 12px;
}
.new .showtime {
  margin: 3% 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.showtime .item {
  background-color: #3b393b;
  border-radius: 43px;
  flex: 1;
  display: flex;
  justify-items: center;
}
.showtime .block {
  width: 1%;
}
.item .left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  color: #fff;
  background-color: #fc6e20;
}
.item .right {
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 10px !important;
  color: #fff;
}
#pad-w .imgss {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  min-width: 100px;
}
#pad-w .mask {
  box-sizing: border-box;
  padding: 0 12px;
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0px;
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(230, 122, 75, 0) 0%,
    #e67a4b 100%,
    #e67a4b 100%,
    #e67a4b 100%,
    #edf7fe 100%
  );
}
#pad-w .mask .name {
  margin-top: 45px;
  font-size: 14px;
}
.mask .detail {
  display: flex;
  font-size: 10px;
  align-items: center;
  justify-content: space-between;
}
.detail img {
  display: inline-block;
  margin-left: 2px;
  width: 10px;
  height: 16px;
}
</style>
<script>
import Vue from 'vue'
import {
  NoticeBar
  ,
  Search
  ,
  Toast
  ,
  CountDown
} from 'vant'

import wx from 'weixin-js-sdk'

Vue.use(CountDown)
Vue.use(Search)
Vue.use(NoticeBar)

Vue.use(Toast)
export default {
  data() {
    return {
      info: [],
      images: [],
      tjlist: [],
      list: [],
      gonggao: '',
      value: '',
      immediate: false,
      loading: false,
      finished: false,
      page: 0, // 请求第几页
      total: 0, // 总共的数据条数
      description: '',
      time: 205500000,
      timeData: {},
      message: '',
      show1: false,
      show2: false,
      show3: false,
      timer: null,
      times: 60000,
      yuming: ''
    }
  },

  components: {},
  created: function () {
    this.$emit('footer', true)
  },
  mounted() {
    console.log(window.location.origin)
    let yumings = window.location.origin
    if (yumings == 'http://xn--p3t47lw17ah2c.com' || yumings == 'http://www.xn--p3t47lw17ah2c.com') {
      this.yuming = '津ICP备2022006819号-1'
    } else if (yumings == 'http://xn--bstq8af60f8kc.com' || yumings == 'http://www.xn--bstq8af60f8kc.com') {
      this.yuming = '津ICP备2022006819号-2'
    } if (yumings == 'http://xn--elt21di4i4x5b.com' || yumings == 'http://www.xn--elt21di4i4x5b.com') {
      this.yuming = '津ICP备2022006819号-3'
    }
    this.getShareInfo()
    this.recordapi()
    this.getindexlist()
    this.timer = setInterval(() => {
      location.href = location
    }, this.times)
  },
  activated() {
    if (this.$route.meta.keepAlive) {
      this.$emit('footer', true)
    }
  },
  beforeRouteEnter(to, from, next) {
    next()
    // this.recordapi()
    // this.getindexlist()
    // this.timer = setInterval(() => {
    //   location.href = location
    // }, this.times)
  },
  beforeRouteLeave(to, from, next) {
    next()
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },

  metaInfo() {
    const title = '首页'
    return {
      title,
      meta: [{
        description: this.info.keyword
      },
      {
        keywords: this.info.description
      }
      ]
    }
  },
  // beforeDestroy() {
  // if(this.timer) {
  // 　　　　clearInterval(this.timer); //关闭
  // 　　 }
  // },
  methods: {
    //判断当前环境
    urlParse(str) {
      let arr = str.slice(1).split('&')
      let map = {}
      arr.forEach(item => {
        let temp = item.split('=')
        map[temp[0]] = temp[1]
      })
      return map
    },
    getShareInfo() {
      // 只需要传地址就好，其他后端都会写好来
      let url = location.href.split('#')[0]
      console.log('@@@', url);
      var that = this
      that.$api.post('/Index/jssdk', { url: url }).then(res => {
        const config = res.data
        const huodong = res.huodong
        wx.config({
          appId: config.appId, // appID 公众号的唯一标识
          timestamp: config.timestamp, // 生成签名的时间戳
          nonceStr: config.nonceStr, //  生成签名的随机串
          signature: config.signature, // 生成的签名
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData'
          ]
        })
        wx.ready(() => {
          var shareData = {
            title: huodong.title,
            desc: huodong.introduction,
            link: window.location.href,
            imgUrl:
              huodong.picurl
          }
          // 点击要去分享
          wx.updateAppMessageShareData(shareData)
          wx.updateTimelineShareData(shareData)
        })
      })
    },
    toggleImg() {
      // const timer = setInterval(() => {
      // 	this.recordapi();
      // 	this.getindexlist()

      // },this.times)
      // console.log(this.times)

    },
    change(e) {
      // console.log(e);
      let timer = e
      let day1 = 0
      if (timer.days > 0) {
        day1 = timer.days * 24
      }
      if (timer.days < 10) {
        timer.days = '0' + timer.days
      }
      timer.hours = timer.hours + day1
      // if (timer.hours < 100) {

      // 	timer.hours = '0' + timer.hours
      // }
      if (timer.hours < 10) {
        timer.hours = '0' + timer.hours
      }

      if (timer.minutes < 10) {
        timer.minutes = '0' + timer.minutes
      }
      if (timer.seconds < 10) {
        timer.seconds = '0' + timer.seconds
      }
      timer.hours = timer.hours + ''
      timer.minutes = timer.minutes + ''
      timer.seconds = timer.seconds + ''
      let hours1 = timer.hours.split('')
      let minutes1 = timer.minutes.split('')
      let seconds1 = timer.seconds.split('')
      timer.hours1 = hours1[0]
      timer.hours2 = hours1[1]
      timer.minutes1 = minutes1[0]
      timer.minutes2 = minutes1[1]
      timer.seconds1 = seconds1[0]
      timer.seconds2 = seconds1[1]
      // console.log(timer)
      this.timeData = timer
    },
    tiao(e) {
      this.$router.push('Usercont?id=' + e)
      console.log(e)
    },
    tiaos(e) {
      this.$router.push('Shares')
      console.log(e)
    },
    urllinks(e) {
      // this.$router.push(e)
      window.location.href = e
      console.log(e)
    },
    onSearch(e) {
      let message = this.Trim(this.message)
      this.message = message
      // if(!message){
      // 	Toast("关键词不能为空");
      // 	return false;
      // }
      this.page = 0
      this.list = []
      this.finished = false
      this.getindexlist()
    },
    onclear(e) {

      // this.message=''
      // this.page=0;
      // this.list=[];
      // this.finished=false;
      // this.getindexlist()
    },
    Trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, '')
    },
    recordapi() {
      var that = this
      var userid = that.$cookieStore.getCookie('userid')
      that.$api.post('/Index/index', {}).then(res => {
        // console.log(userid);
        that.info = res.info
        if (res.info.tpzt == 1) {
          let time = parseInt(new Date().getTime() / 1000) + ''
          console.log(time)
          console.log(res.info.tpendtime)
          console.log(res.info.dqtime)
          if (time < res.info.tpendtime) {
            this.time = (res.info.tpendtime - time) * 1000
            console.log(res.info.tpendtime - time)
          }
        }

        that.gonggao = res.info.gonggao
        console.log(res.info.gonggao)
        that.images = res.info.banner
        that.tjlist = res.info.tjlist
      })
    },
    getindexlist() {
      var that = this
      that.page = that.page + 1
      that.$api.post('/Index/indexlist', {
        'page': this.page,
        'message': this.message
      }).then(res => {
        let rows = res.list.data // 请求返回当页的列表
        // console.log(rows)
        that.loading = false
        that.pageSize = res.list.per_page
        that.total = res.list.total
        if (rows == null || rows.length === 0) {
          // 加载结束
          that.finished = true
          return
        }
        // 将新数据与老数据进行合并
        that.list = that.list.concat(rows)
        // //如果列表数据条数>=总条数，不再触发滚动加载
        if (that.list.length >= that.total) {
          that.finished = true
        }
      })
    },
    getmorelist() {
      var that = this
      if (this.list.length > 0) {

      } else {
        return false
      }
      that.page = that.page + 1
      that.$api.post('/Index/indexlist', {
        'page': this.page,
        'message': this.message
      }).then(res => {
        let rows = res.list.data // 请求返回当页的列表
        // console.log(rows)
        that.loading = false
        that.pageSize = res.list.per_page
        that.total = res.list.total
        if (rows == null || rows.length === 0) {
          // 加载结束
          that.finished = true
          return
        }
        // 将新数据与老数据进行合并
        that.list = that.list.concat(rows)
        // //如果列表数据条数>=总条数，不再触发滚动加载
        if (that.list.length >= that.total) {
          that.finished = true
        }
      })
    }

  }
}
</script>
